<template>
	<view class="navigation u-flex u-flex-nowrap u-row-center">
		<view class="left">
			<view class="item u-text-center" @tap="collect">
				<block v-if="isCollect === 0">
					<u-icon name="star" :size="40" :color="$u.color['contentColor']"></u-icon>
					<view class="text u-line-1">收藏</view>
				</block>
				<block v-else>
					<u-icon name="star-fill" :size="40" color="#ed3f14"></u-icon>
					<view class="text u-line-1" style="color: #ed3f14;">已收藏</view>
				</block>
			</view>
			<view class="item car" @tap="toCart">
				<u-badge class="car-num" :count="cartsCount" type="error" :offset="[-3, -6]"></u-badge>
				<u-icon name="shopping-cart" :size="40" :color="$u.color['contentColor']"></u-icon>
				<view class="text u-line-1">购物车</view>
			</view>
		</view>
		<view class="right">
			<view class="cart btn u-line-1" @tap="cartsAdd">加入购物车</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"submit-bar",
		props:{
			isCollect: {
				type: Number,
				default: 0
			},
			cartsCount: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
			};
		},
		methods:{
			/**
			 * 收藏商品
			 */
			async collect(){
				this.$emit('collect');
			},
			
			/**
			 * 加入购物车
			 */
			async cartsAdd(){
				this.$emit('cartsAdd');
			},
			/**
			 * 加入购物车
			 */
			toCart(){
				this.$u.route({
					type:'switchTab',
					url: 'pages/cart/cart'
				})
			}
		}
	}
</script>


<style lang="scss" scoped>
.navigation {
	// display: flex;
	// margin-top: 100rpx;
	// border: solid 2rpx #f2f2f2;
	background-color: #ffffff;
	padding: 16rpx 0;
	width: 750rpx;
	.left {
		flex: 0.9;
		width: 50%;
		display: flex;
		font-size: 20rpx;
		.item {
			margin: 0 30rpx;
			&.car {
				text-align: center;
				position: relative;
				.car-num {
					position: absolute;
					top: -10rpx;
					right: -10rpx;
				}
			}
		}
	}
	.right {
		display: flex;
		font-size: 28rpx;
		align-items: center;
		.btn {
			line-height: 66rpx;
			padding: 0 30rpx;
			border-radius: 36rpx;
			color: #ffffff;
		}
		.cart {
			background-color: #ed3f14;
			margin-right: 30rpx;
		}
	}
}
</style>

